<template>
  <basic-container>
    <el-tabs type="border-card">
      <el-tab-pane label="工单详情">
        <avue-form ref="form" v-model="form" :option="option">
          <template slot-scope="" slot="workOrderNo">
            <div>
              <el-input v-model="form.workOrderNo" @keydown.enter.native="getWorkOrderInfo" placeholder="请输入 工单号或扫描产品序列号">
                <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
              </el-input>
            </div>
          </template>
        </avue-form>
      </el-tab-pane>
    </el-tabs>
    <el-row>
      <el-col :span="20">
        <el-tabs type="border-card">
          <el-tab-pane label="工站详情">
            <div class="stationStatus">
              <label>选择当前工站</label>
              <span class="finished">已过站数量</span>
              <span class="unfinished">等待过站数量</span>
              <span class="rejectsIcon"></span>
              <font class="rejects">不良品隔离数量</font>
            </div>
            <div class="station-box">
              <div class="station-list" v-if="workStationList.length > 0">
                <div class="workStationList">
                  <div class="stationItem" v-for="(item, index) in workStationList" :key="index" @click="bindingStation(index)">
                    <div class="item-info">
                      <div>
                        <img :src="item.imgsrc ? item.imgsrc : defaultIcon" />
                      </div>
                      <div class="station-name">{{ item.routeName }}</div>
                    </div>
                    <div class="item-progress">
                      <div :class="['progress-con', 'finished', item.completedQuantity == '0' ? 'unactive' : '']">
                        <span class="progress"></span><span class="count">{{ item.completedQuantity }}</span>
                      </div>
                      <div :class="['progress-con', 'unfinished', item.waitingQuantity == '0' ? 'unactive' : '']">
                        <span class="progress"></span><span class="count">{{ item.waitingQuantity }}</span>
                      </div>
                    </div>
                    <div :class="['stationItemStatus', item.completedQuantity == '0' ? 'notStarted' : item.completedQuantity == form.planQuantity ? 'completed' : 'haveInHand']">
                      {{ item.completedQuantity == '0' ? '未开始' : item.completedQuantity == form.planQuantity ? '已完成' : '进行中' }}
                    </div>
                    <div v-if="item.ngQuantity > 0" class="unqualified">{{ item.ngQuantity }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="4">
        <div class="customTabs">
          <div class="tabsHeader"></div>
          <div class="tabsBody">
            <div class="echartsOne">
              <chart-view class="chart-content" :chart-option="finishedChartOpt" :auto-resize="true" :width="echartsWidth" :height="echartsHeight" />
              <div v-if="JSON.stringify(finishedChartOpt) != '{}'" class="echartsTitle">已完工数量</div>
            </div>
            <div class="echartsTwo">
              <chart-view class="chart-content" :chart-option="wipChartOpt" :auto-resize="true" :width="echartsWidth" :height="echartsHeight" />
              <div v-if="JSON.stringify(wipChartOpt) != '{}'" class="echartsTitle">WIP数量</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog class="bindingStation" append-to-body title="绑定工位" :visible.sync="isShowDialog" width="30%" :before-close="handleClose">
      <avue-form id="stationForm" ref="stationForm" v-model="stationForm" :option="stationOption">
        <template slot-scope="" slot="stationCode">
          <div>
            <el-input
              v-model="stationForm.stationCode"
              name="stationCode"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="getStationInfo"
            ></el-input>
          </div>
        </template>
      </avue-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="small" :disabled="!bindingStationIsTrue" @click="routeStationOperation">开始作业</el-button> -->
        <el-button size="small" icon="el-icon-circle-close" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog append-to-body title="开线检查结果" :visible.sync="isShowOpenLineCheckDialog" width="50%" @close="openLineCheckDialogClose">
      <avue-crud :data="openLineCheckResult.details" :option="openLineCheckResultOption" :row-class-name="tableRowClassName">
        <template slot="isAcceptException" slot-scope="scope">
          <el-radio-group v-if="scope.row.checkItemResult === 'NG'" v-model="scope.row.isAcceptException" @change="isAcceptExceptionChange()">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </template>
      </avue-crud>
      <el-row style="line-height: 40px">
        <el-col :span="3">综合结果判断：</el-col>
        <el-col :span="21">
          <el-radio-group v-model="openLineCheckResult.checkResult" :disabled="true">
            <el-radio label="PASS">通过</el-radio>
            <el-radio label="CONCESSION_PASS">让步通过</el-radio>
            <el-radio label="NO_PASS">不通过</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer close">
        <el-button size="small" icon="el-icon-circle-close" @click="isShowOpenLineCheckDialog = false">关 闭</el-button>
        <el-button size="small" type="primary" @click="openLineCheckSubmit()"><i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
      </div>
    </el-dialog>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"> </common-modal-template>
  </basic-container>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { getProcessRoute, checkStation, getDetailByWorkOrderNo, checkRoute, checkSkill, getOpenLineCheckResult, submitOpenLineCheckResult } from '@/api/product/station-manage';
import { getDetail as getWorkOrderDetail } from '@/api/product/workorder';
import { selectInput, focusInput } from '@/util/helpers';
import ChartView from '@/components/chart/index.vue';
import { getPackingDetail } from '@/api/product/productrouteManage';
export default {
  components: {
    CommonModalTemplate,
    ChartView
  },
  mixins: [],
  data() {
    return {
      form: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 135,
        column: [
          {
            label: '工单号/产品序列号',
            prop: 'workOrderNo',
            span: 6
          },
          {
            label: '产品编码',
            prop: 'productPartNo',
            span: 6,
            disabled: true,
            placeholder: '产品编码'
          },
          {
            label: '产品型号',
            prop: 'productPartModel',
            span: 6,
            disabled: true,
            placeholder: '产品型号'
          },
          {
            label: '工单计划数量',
            prop: 'planQuantity',
            span: 6,
            disabled: true,
            placeholder: '工单计划数量'
          },
          {
            label: '工单状态',
            prop: 'status',
            type: 'select',
            span: 6,
            disabled: true,
            placeholder: '工单状态',
            dataType: 'string',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=mfg_work_order'
          },
          {
            label: '产线',
            prop: 'productionLine',
            span: 6,
            disabled: true
          },
          {
            label: '计划生产时间',
            prop: 'planProductDate',
            type: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm',
            span: 6,
            disabled: true,
            startPlaceholder: '计划开始时间',
            endPlaceholder: '计划结束时间'
          }
        ]
      },
      isShowDialog: false,
      stationForm: {}, //绑定工位信息
      stationOption: {
        //绑定工位模态框配置
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '绑定工位',
            prop: 'stationCode',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入工位编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '工站名称',
            prop: 'workStationName',
            span: 24,
            disabled: true,
            placeholder: '工站名称'
          }
          // {
          //   label: '车间名称',
          //   prop: 'workshopName',
          //   span: 24,
          //   disabled: true,
          //   placeholder: '车间名称'
          // },
          // {
          //   label: '产线',
          //   prop: 'productionLineName',
          //   span: 24,
          //   disabled: true,
          //   placeholder: '产线'
          // }
        ]
      },
      timer: new Date().getTime(),
      tableOption: {}, //公用模态框配置信息
      workStationList: [], //工单绑定工序信息
      // bindingStationIsTrue: false, //绑定工位是否成功
      finishedChartOpt: {},
      wipChartOpt: {},
      echartsWidth: '100%',
      echartsHeight: '100%',
      selectDeviceIndex: '',
      openLineCheckResult: {}, //开线检查结果
      isShowOpenLineCheckDialog: false,
      openLineCheckResultOption: {
        height: 300,
        calcHeight: 30,
        border: true, //表格外框线是否显示
        stripe: true, //表格是否显示条纹
        header: true, //表格头部是否显示
        index: true, //表格数据序号
        indexLabel: '序号',
        page: false, //表格分页是否显示
        addBtn: false, //新增按钮是否显示
        menu: false, //表格操作栏是否显示
        refreshBtn: false, //刷新按钮是否显示
        columnBtn: false, //控制表格列是否显示按钮是否显示
        searchShowBtn: false,
        column: [
          {
            label: '检查项类型',
            prop: 'checkItemType',
            type: 'select',
            dicData: [
              { label: '物料', value: 'MATERIAL' },
              { label: '人员', value: 'PERSONNEL' }
            ]
          },
          {
            label: '检查项内容',
            prop: 'checkItemContent'
          },
          {
            label: '检查结果',
            prop: 'checkItemResult'
          },
          {
            label: '异常原因',
            prop: 'exceptionCause'
          },
          {
            label: '接受异常',
            prop: 'isAcceptException',
            slot: true
          }
        ]
      },
      openLineCheckResult: {}
    };
  },
  mounted() {
    let workOrderId = this.$store.state.stationOperation.workOrderId;
    if (workOrderId) {
      getWorkOrderDetail(workOrderId).then((res) => {
        this.form = this._get(res, 'data.data', {});
        this.form.orderId = this._get(res, 'data.data.id', '');
        this.$store.commit('stationOperation/setWorkOrderId', this.form.orderId);
        let productionLine = [];
        this._forEach(this.form.productionLineVoList, (item) => {
          productionLine.push(item.name);
        });
        this.form.productionLine = productionLine.join('，');
        this.form.planProductDate = [this.form.planStartTime, this.form.planEndTime];
        this.findWorkOrderNo();
      });
    }
  },
  methods: {
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    },

    /**
     * 打开选择工单号模态框
     */
    openWorkOrderNoModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择工单号（双击进行选择）',
        url: '/api/mes-product/work-order/page?workOrderStatus=1,2,3,4,6',
        isPage: true,
        rowSelectionType: 'single',
        searchMenuSpan: 24,
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '生产工单',
            prop: 'workOrderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'type',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'productPartNo',
            search: true
          },
          {
            label: '产品名称',
            prop: 'productPartName'
          },
          {
            label: '产品型号',
            prop: 'productPartModel',
            search: true
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '派工产线',
            prop: 'productionLineName',
            hide: true,
            search: true,
            type: 'select',
            filterable: true,
            dicUrl: '/api/mes-product/product/line/list',
            props: {
              label: 'name',
              value: 'name'
            }
          },
          {
            label: '派工产线',
            prop: 'productionLineNames'
          },
          {
            label: '计划开始时间',
            prop: 'planStartTime'
          },
          {
            label: '计划结束时间',
            prop: 'planEndTime'
          },
          {
            label: '制定人',
            prop: 'creator'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dataType: 'string',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=mfg_work_order'
          },
          {
            label: '所属机型',
            prop: 'productModel',
            search: true
          },
          {
            label: '批次',
            prop: 'lotNo',
            search: true
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      };
    },

    /**
     * 获取选中工单号
     */
    getSelectedRows(rowData) {
      this.form = rowData;
      this.form.orderId = rowData.id;
      this.$store.commit('stationOperation/setWorkOrderId', this.form.orderId);
      let productionLine = [];
      this._forEach(rowData.productionLineVoList, (item) => {
        productionLine.push(item.name);
      });
      this.form.productionLine = productionLine.join('，');
      this.form.planProductDate = [this.form.planStartTime || '', this.form.planEndTime || ''];
      this.findWorkOrderNo();
    },

    /**
     * 根据工单号获取工单详情
     */
    getWorkOrderInfo() {
      if (!this.form.workOrderNo) {
        this.$message({
          type: 'warning',
          message: '请输入工单号或扫描产品序列号！'
        });
        return;
      }
      getDetailByWorkOrderNo(this.form.workOrderNo).then((res) => {
        let status = this._get(res, 'data.data.status', '');
        if (status != 1 && status != 2 && status != 3 && status != 4 && status != 6) {
          this.$message({
            type: 'warning',
            message: '工单需要待排程/待生产/生产中/完工/强制完工状态，才可以进入工站作业！'
          });
          this.$refs.form.resetFields();
          this.workStationList = [];
          return;
        }
        this.form = this._get(res, 'data.data', {});
        this.form.orderId = this._get(res, 'data.data.id', '');
        this.$store.commit('stationOperation/setWorkOrderId', this.form.orderId);
        let productionLine = [];
        this._forEach(this.form.productionLineVoList, (item) => {
          productionLine.push(item.name);
        });
        this.form.productionLine = productionLine.join('，');
        this.form.planProductDate = [this.form.planStartDate || '', this.form.planEndDate || ''];
        this.findWorkOrderNo();
      });
    },

    /**
     * 通过工单号或者产品序列号查找工单工艺路线工站
     */
    findWorkOrderNo() {
      let params = {
        // lineId: this.form.lineId,
        workorderId: this.form.orderId
        // workshopId: this.form.workshopId
      };
      getProcessRoute(params).then((res) => {
        this.workStationList = this._get(res, 'data.data', []);
        //渲染已完工数环状图
        let completionQuantity = Number(this._get(this.workStationList, `[${this.workStationList.length - 1}].completedQuantity`, 0));
        let completionRate = Number(((completionQuantity / Number(this.form.planQuantity)) * 100).toFixed(2));
        this.finishedChartOpt = {
          title: {
            text: completionQuantity,
            show: true,
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: '30px',
              fontWeight: 'bold'
            }
          },
          series: [
            {
              type: 'pie',
              color: ['#5bb85d', '#dcdcdc'],
              radius: ['55%', '70%'],
              label: {
                show: false
              },
              data: [
                { value: completionRate, name: '' },
                { value: 100 - completionRate, name: '' }
              ],
              hoverAnimation: false
            }
          ]
        };
        //渲染WIP数环状图
        let waitingQuantity = Number(this._get(this.workStationList, '[0].waitingQuantity', 0)); //获取第一个工站待过站数量
        let wipQuantity = Number(this.form.planQuantity) - completionQuantity - waitingQuantity;
        let wipRate = Number(((wipQuantity / Number(this.form.planQuantity)) * 100).toFixed(2));
        this.wipChartOpt = {
          title: {
            text: wipQuantity,
            show: true,
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: '30px',
              fontWeight: 'bold'
            }
          },
          series: [
            {
              type: 'pie',
              color: ['#fc9600', '#dcdcdc'],
              radius: ['55%', '70%'],
              label: {
                show: false
              },
              data: [
                { value: wipRate, name: '' },
                { value: 100 - wipRate, name: '' }
              ],
              hoverAnimation: false
            }
          ]
        };
        // this._forEach(this.workStationList, (item) => {
        //   item.qualified = parseFloat(((Number(item.completedQuantity) / (Number(item.completedQuantity) + Number(item.waitingQuantity) || 0)) * 100).toFixed(2)) + '%';
        // });
      });
    },

    resize() {
      window.onresize = () => {
        this.$refs.echartsOne.resizeHandler();
      };
    },

    /**
     * 打开绑定工位
     */
    async bindingStation(index) {
      let userId = localStorage.getItem('saber-userInfo') ? JSON.parse(localStorage.getItem('saber-userInfo')).content.user_id : '';
      let params = {
        routeId: this.workStationList[index].id,
        userId: userId
      };
      checkSkill(params).then((res) => {
        checkRoute(this.form.orderId, this.workStationList[index].routeCode).then(() => {
          this.isShowDialog = true;
          this.stationForm = this.form;
          this.stationForm.workshopId = '';
          this.stationForm.workshopName = '';
          this.stationForm.lineId = '';
          this.stationForm.productionLineName = '';
          this.stationForm.routeId = this.workStationList[index].id;
          this.stationForm.workStationCode = this.workStationList[index].routeCode;
          this.stationForm.workStationName = this.workStationList[index].routeName;
          this.stationForm.isFirst = this.workStationList[index].isFirst;
          this.stationForm.isLast = this.workStationList[index].isLast;
          this.stationForm.stationCode = '';
          // this.bindingStationIsTrue = false;
          this.stationForm.isShowEsop = this.workStationList[index].isShowEsop;
          this.stationForm.esopUrl = this.workStationList[index].esopUrl;
          let options = this.workStationList[index].options && this.workStationList[index].options != null ? JSON.parse(this.workStationList[index].options) : {};
          this.stationForm.isPackWeight = options.isPackWeight;
          this.stationForm.weightPoint = options.weightPoint;
          this.stationForm.productPackingDetailId = options.productPackingDetailId;
          this.getPackWeightInfo();
          this.stationForm.sequence = this.workStationList[index].sequence;
          this.stationForm.isSupportMixPack = options.isSupportMixPack;
          this.stationForm.isAutomaticAcquisition = options.isAutomaticAcquisition;
          this.stationForm.isBindExternalSn = options.isBindExternalSn;
          this.stationForm.externalSequenceDefinitionName = options.externalSequenceDefinitionName;
          this.stationForm.isCarrier = this.workStationList[index].isCarrier;
          this.stationForm.workSectionId = this.workStationList[index].workSectionId;
          this.stationForm.workSectionCode = this.workStationList[index].workSectionCode;
          this.stationForm.workSectionName = this.workStationList[index].workSectionName;
          this.stationForm.isFirstInSection = this.workStationList[index].isFirstInSection;
          this.stationForm.processId = this.workStationList[index].processId;
          this.$nextTick(() => {
            focusInput('stationCode');
          });
        });
      });
    },

    getPackWeightInfo() {
      if (this.stationForm.productPackingDetailId) {
        getPackingDetail(this.stationForm.productPackingDetailId).then((res) => {
          this.stationForm['boxingStandardWeight'] = this._get(res, 'data.data.boxingStandardWeight', '');
          this.stationForm['maxWeight'] = this._get(res, 'data.data.maxWeight', '');
          this.stationForm['minWeight'] = this._get(res, 'data.data.minWeight', '');
          this.stationForm['sealingStandardWeight'] = this._get(res, 'data.data.sealingStandardWeight', '');
          this.stationForm['maxWeight2'] = this._get(res, 'data.data.maxWeight2', '');
          this.stationForm['minWeight2'] = this._get(res, 'data.data.minWeight2', '');
        });
      }
    },

    handleClose() {
      this.$refs.stationForm.resetFields();
      this.stationForm.workshopId = '';
      this.stationForm.workshopName = '';
      this.stationForm.lineId = '';
      this.stationForm.productionLineName = '';
      this.isShowDialog = false;
    },

    /**
     * 获取工位信息
     */
    getStationInfo() {
      checkStation(this.stationForm.stationCode).then(
        (res) => {
          this.stationForm.workshopId = this._get(res, 'data.data.workshopId', '');
          this.stationForm.workshopName = this._get(res, 'data.data.workshopName', '');
          this.stationForm.lineId = this._get(res, 'data.data.lineId', '');
          this.stationForm.productionLineName = this._get(res, 'data.data.lineName', '');
          let params = {
            workshopId: this.stationForm.workshopId,
            workshopName: this.stationForm.workshopName,
            lineId: this.stationForm.lineId,
            lineName: this.stationForm.productionLineName,
            stationId: this._get(res, 'data.data.id', ''),
            stationName: this._get(res, 'data.data.name', ''),
            workOrderId: this.stationForm.orderId,
            workOrderNo: this.stationForm.workOrderNo,
            processRouteId: this.stationForm.routeId,
            processRouteName: this.stationForm.workStationName,
            operationMode: 'HUMAN',
            isFirstRoute: this.stationForm.isFirst,
            isLastRoute: this.stationForm.isLast,
            sequence: this.stationForm.sequence
          };
          let lineId = this._get(res, 'data.data.lineId', '');
          // if (lineId) {
          //   let obj = undefined;
          //   for (let i = 0; i < this.form.productionLineVoList.length; i++) {
          //     if (this.form.productionLineVoList[i].id == lineId) {
          //       obj = this.form.productionLineVoList[i];
          //     }
          //   }
          //   if (obj === undefined) {
          //     this.$confirm('该工位所属产线并非派工产线，请确认是否继续进入作业?', {
          //       confirmButtonText: '确定',
          //       cancelButtonText: '取消',
          //       type: 'warning'
          //     })
          //       .then(() => {
          //         this.getBindingStationInfo(params);
          //       })
          //       .catch(() => {
          //         selectInput('stationCode');
          //       });
          //   } else {
          this.getBindingStationInfo(params);
          //   }
          // }
        },
        (error) => {
          selectInput('stationCode');
          // this.bindingStationIsTrue = false;
        }
      );
    },

    /**
     * 获取工序绑定工位信息
     */
    async getBindingStationInfo(params) {
      let bindingStationInfo = await this.$store.dispatch('stationOperation/getBindingStationInfo', params);
      if (this._get(bindingStationInfo, 'data.code', '') === 200) {
        // this.bindingStationIsTrue = true;
        let workStationInfo = {
          workStationCode: this.stationForm.workStationCode, //配置工站编码
          workorderStationId: this._get(bindingStationInfo, 'data.data.id', ''), //工序和工位绑定ID
          stationId: this._get(bindingStationInfo, 'data.data.stationId', ''), //工位ID
          stationCode: this.stationForm.stationCode, //工位编码
          stationName: this._get(bindingStationInfo, 'data.data.stationName', ''), //工位名称
          routeStationId: this._get(bindingStationInfo, 'data.data.processRouteId', ''), //工序ID
          routeName: this._get(bindingStationInfo, 'data.data.processRouteName', ''), //工序名称
          lineId: this._get(bindingStationInfo, 'data.data.lineId', ''), //产线ID
          lineName: this._get(bindingStationInfo, 'data.data.lineName', ''), //产线名称
          workOrderId: this._get(bindingStationInfo, 'data.data.workOrderId', ''), //工单号ID
          workOrderNo: this._get(bindingStationInfo, 'data.data.workOrderNo', ''), //工单号
          workshopName: this._get(bindingStationInfo, 'data.data.workshopName', ''), //车间名称
          planQuantity: this._get(this.stationForm, 'planQuantity', 0), //计划数量
          completedQuantity: this._get(bindingStationInfo, 'data.data.completedQuantity', 0), //过站数量
          waitingQuantity: this._get(bindingStationInfo, 'data.data.waitingQuantity', 0), //等待过站数量
          isShowEsop: this._get(this.stationForm, 'isShowEsop', ''), //是否启用esop
          esopUrl: this._get(this.stationForm, 'esopUrl', ''), //esop地址
          isPackWeight: this._get(this.stationForm, 'isPackWeight', false), //是否开启包装称重
          weightPoint: this._get(this.stationForm, 'weightPoint', ''), //称重时机
          boxingStandardWeight: this._get(this.stationForm, 'boxingStandardWeight', ''), //包装标准重量
          maxWeight: this._get(this.stationForm, 'maxWeight', ''), //封箱后重量上限
          minWeight: this._get(this.stationForm, 'minWeight', ''), //封箱后重量下限
          sealingStandardWeight: this._get(this.stationForm, 'sealingStandardWeight', ''), //包装标准重量
          maxWeight2: this._get(this.stationForm, 'maxWeight2', ''), //封箱前重量上限
          minWeight2: this._get(this.stationForm, 'minWeight2', ''), //封箱前重量下限
          shiftId: this._get(bindingStationInfo, 'data.data.shiftId', ''), //班次ID
          shiftName: this._get(bindingStationInfo, 'data.data.shiftName', ''), //班次名称
          isSupportMixPack: this._get(this.stationForm, 'isSupportMixPack', false), //是否混包生产
          isAutomaticAcquisition: this._get(this.stationForm, 'isAutomaticAcquisition', false), //是否设备自动采集
          isBindExternalSn: this._get(this.stationForm, 'isBindExternalSn', false), //是否绑定外部条码
          externalSequenceDefinitionName: this._get(this.stationForm, 'externalSequenceDefinitionName', false), //外部序列号条码名称
          isCarrier: this._get(this.stationForm, 'isCarrier', false), //是否周转盒
          workSectionId: this._get(this.stationForm, 'workSectionId', ''), //工段ID
          workSectionCode: this._get(this.stationForm, 'workSectionCode', ''), //工段编码
          workSectionName: this._get(this.stationForm, 'workSectionName', ''), //工段名称
          productPartId: this.form.productPartId,
          productPartNo: this.form.productPartNo,
          productPartName: this.form.productPartName,
          productPartModel: this.form.productPartModel,
          bomId: this.form.bomId
        };
        this.$store.commit('stationOperation/setworkStationInfo', workStationInfo);
        this.routeStationOperation(workStationInfo);
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (row.checkItemResult === 'NG') {
        return 'ng-row';
      } else {
        return '';
      }
    },

    /**
     * 开始工站作业
     */
    routeStationOperation(workStationInfo) {
      this.isShowDialog = false;
      if (this.stationForm.isFirstInSection) {
        let params = {
          processId: this.stationForm.processId,
          sectionId: workStationInfo.workSectionId,
          lineId: workStationInfo.lineId,
          routeId: workStationInfo.routeStationId
        };
        getOpenLineCheckResult(params).then((res) => {
          this.openLineCheckResult = this._get(res, 'data.data', {});
          let openCheck = this.openLineCheckResult.openCheck;
          let completeCheck = this.openLineCheckResult.completeCheck;
          if (openCheck && !completeCheck) {
            this.isShowOpenLineCheckDialog = true;
            this._forEach(this.openLineCheckResult.details, (item) => {
              item.isAcceptException = false;
            });
          } else {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.$router.replace('/product/model-manage/station-op-template');
          }
        });
      } else {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.$router.replace('/product/model-manage/station-op-template');
      }
    },
    openLineCheckDialogClose() {
      this.openLineCheckResult = {};
    },
    openLineCheckSubmit() {
      if (this.openLineCheckResult.checkResult === 'NO_PASS') {
        submitOpenLineCheckResult(this.openLineCheckResult).then((res) => {
          this.$message({
            type: 'success',
            message: res.data.msg
          });
        });
      } else if (this.openLineCheckResult.checkResult === 'CONCESSION_PASS') {
        submitOpenLineCheckResult(this.openLineCheckResult).then((res) => {
          this.$message({
            type: 'success',
            message: res.data.msg
          });
        });
        this.$router.replace('/product/model-manage/station-op-template');
      } else {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.$router.replace('/product/model-manage/station-op-template');
      }
      this.isShowOpenLineCheckDialog = false;
    },
    isAcceptExceptionChange() {
      for (let i = 0; i < this.openLineCheckResult.details.length; i++) {
        if (this.openLineCheckResult.details[i].checkItemResult === 'NG' && !this.openLineCheckResult.details[i].isAcceptException) {
          this.openLineCheckResult.checkResult = 'NO_PASS';
          break;
        } else {
          this.openLineCheckResult.checkResult = 'CONCESSION_PASS';
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.stationStatus {
  font-size: 12px;
  margin-left: 6px;
  .finished {
    border-left-color: #5cb85c;
    color: #5cb85c;
  }
  .unfinished {
    border-left-color: #ef9004;
    color: #ef9004;
  }
  .qualified {
    border-left-color: #2a579a;
    color: #2a579a;
  }
  .rejectsIcon {
    background: #f44336;
    padding: 0;
    margin-right: 5px;
    border-radius: 50%;
  }
  .rejects {
    color: #f44336;
  }
  span {
    border-left: 15px solid transparent;
    padding-left: 5px;
    margin-left: 12px;
  }
}
.station-box {
  height: calc(100vh - 480px);
  overflow: auto;
  .border-title {
    font-size: 15px;
    line-height: 20px;
    border-left: 5px solid #5a93bb;
    border-bottom: 1px dashed #ccc;
    font-weight: 700;
    span {
      margin-right: 30px;
    }
    .item-info {
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
  .stationItem {
    width: 200px;
    height: 180px;
    border: 1px solid #cccccc;
    margin: 10px;
    text-align: center;
    position: relative;
    .item-info {
      height: 73%;
      div {
        padding: 5px 0;
      }
    }
    .item-progress {
      height: 27%;
      text-align: left;
      padding-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .count {
        padding-left: 5px;
      }
    }
  }
  .progress-con.finished.unactive .progress {
    background: #dbdbdb;
  }
  .progress-con.finished .progress {
    background: #5cb85c;
  }
  .progress-con.unfinished.unactive .progress {
    background: #dbdbdb;
  }
  .progress-con.unfinished .progress {
    background: #ff9800;
  }
  .unqualified {
    background: #f44336;
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 0 5px;
    border-radius: 10px;
    color: #ffffff;
  }
  .progress {
    display: inline-block;
    width: 60%;
    height: 10px;
    margin: 0;
    span {
      margin: 0 5px;
    }
  }
  .stationItemStatus {
    position: absolute;
    top: 0;
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    border-bottom-right-radius: 6px;
  }
  .notStarted {
    background: #dbdbdb;
  }
  .completed {
    background: #31dc30;
  }
  .haveInHand {
    background: #5479e6;
  }
}
.progress-con {
  padding: 0;
  height: 15px;
}
.workStationList {
  display: flex;
  flex-wrap: wrap;
}
.bindingStation {
  ::v-deep .el-form {
    .avue-form__menu {
      display: none !important;
    }
  }
  ::v-deep .avue-crud__menu {
    display: none;
  }
}
.el-tabs {
  ::v-deep .el-form {
    .avue-form__menu {
      display: none !important;
    }
  }
}
::v-deep .el-card__body {
  padding: 0;
  .el-tabs {
    margin: 10px;
  }
}
::v-deep .el-tabs__item {
  color: #606266 !important;
  font-weight: bold;
}
.customTabs {
  margin: 10px;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  .tabsHeader {
    width: 100%;
    height: 39px;
    background: #f5f7fa;
  }
  .tabsBody {
    width: 100%;
    height: calc(100vh - 435px);
    .echartsOne {
      width: 100%;
      height: 50%;
      // position: relative;
    }
    .echartsTwo {
      width: 100%;
      height: 50%;
      // position: relative;
    }
    .chart-content {
      height: 80%;
    }
    .echartsTitle {
      // position: absolute;
      // top: 0;
      // width: 100%;
      height: 8%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
::v-deep .el-table {
  .scan-entry-row {
    background: #caf982 !important;
  }
}
::v-deep .el-date-editor {
  .el-input__icon {
    display: none;
  }
  input {
    width: 50%;
  }
}
::v-deep .el-table .ng-row td {
  color: #ff0000;
}
</style>
